<template>
  <el-container>
    <el-header height="50px" style="text-align: right; font-size: 12px">
      <div class="headerDiv">
        <el-button
          id="drawerBtn"
          icon="el-icon-menu"
          type="text"
          style="font-size: 24px"
          @click="initLeftList"
        ></el-button>
        <a>Pradypod</a>
        <el-dropdown class="el-dropdown-link">
          <i class="el-icon-user-solid" style="margin-right: 10px"></i>
          陈大帅
          <el-dropdown-menu click="testClick" slot="dropdown">
            <el-dropdown-item>Login</el-dropdown-item>
            <el-dropdown-item>About</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <el-container class="middle">
      <el-aside id="bigScreenAside">
        <div class="middle-left">
          <el-input
            class="search"
            placeholder="Input the key"
            v-model="filterText"
          >
          </el-input>

          <el-tree
            class="tree"
            ref="tree"
            :data="treeData"
            :props="defaultProps"
            :filter-node-method="filterNode"
            @node-click="handleNodeClick"
          ></el-tree>
        </div>
      </el-aside>
      <el-main>
        <div class="middle-right">
          <el-card
            v-for="img in images"
            :key="img.sha"
            class="waterfallImage"
            shadow="hover"
            :body-style="{ padding: '0px', 'border-radius': '10px' }"
          >
            <el-image
              :fit="'cover'"
              :src="img.download_url"
              :preview-src-list="imageUrls"
            ></el-image>
          </el-card>
        </div>
      </el-main>
    </el-container>
    <el-drawer
      :visible.sync="drawer"
      :with-header="false"
      direction="ltr"
      :modal="false"
      size="300"
    >
      <el-aside>
        <div class="middle-left">
          <el-input
            class="search"
            placeholder="Input the key"
            v-model="filterText"
          >
          </el-input>

          <el-tree
            class="tree"
            ref="tree"
            :data="treeData"
            :props="defaultProps"
            :filter-node-method="filterNode"
            @node-click="handleNodeClick"
          ></el-tree>
        </div>
      </el-aside>
    </el-drawer>
  </el-container>
</template>

<script>
import giteeHttp from "../common/http/giteeHttp";
export default {
  name: "GiteePics",
  components: {},
  data() {
    return {
      drawer: false,
      filterText: "",
      images: [],
      imageUrls: [],
      treeData: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
      if (data.type === "dir") {
        this.images = data.children;
        this.imageUrls = this.images.map((item) => {
          return item.download_url;
        });
      } else if (data.type === "file") {
        this.images = [data];
        this.imageUrls = [data.download_url];
      } else {
        alert("未识别类型：" + data.type);
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    initLeftList() {
      this.drawer = true;
      giteeHttp
        .getRepoContents("/")
        .then((res) => {
          console.log(res);
          this.treeData = res;
        })
        .catch((err) => {
          console.err(err);
        });
    },
    imgErrorFn(obj) {
      console.log(obj);
    },
    testClick(obj) {
      console.log(obj);
    },
  },
  mounted: function () {},
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 50px;
}
.el-drawer {
  display: none;
  height: 100% !important;
}
.el-aside {
  width: 300px;
  color: #333;
  background-color: rgb(235, 235, 235);
}

.el-main {
  color: #333;
  text-align: center;
  padding: 0px;
  margin: 10px;
  overflow: true;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
}
.headerDiv {
  display: flex;
  flex-direction: row;
}
.headerDiv > a {
  flex: 1;
  font-size: 28px;
  color: skyblue;
  text-align: center;
}
.middle {
  height: 90vh;
  background: rgb(235, 235, 235);
}
.middle-left {
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.middle-right {
  min-height: 100%;
  background: white;
  column-count: 3;
  column-gap: 10px;
}
.waterfallImage {
  margin-bottom: 10px;
  break-inside: avoid;
}
.search {
  height: 40px;
  width: 95%;
  margin-top: 10px;
}
.tree {
  height: 100%;
  width: 95%;
  overflow: auto;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  margin-bottom: 10px;
  margin-top: 10px;
}
.el-tree {
  min-width: 90%;
  display: inline-block;
}
#drawerBtn {
  display: none;
}
@media screen and (max-width: 700px) {
  .middle-left {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .el-drawer {
    height: 100% !important;
  }
  #bigScreenAside {
    display: none;
  }
  #drawerBtn {
    display: block;
  }
}
</style>

